@use '@/styles/gobal.scss' as *;
.login {
    width: 100%;
    height: 100%;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    background-color: $background-color;
    background-image: url('/images/loginBgc.jpg');
    // background-size: cover;
    background-size: cover;
    box-sizing: border-box;
    padding-top: pxToRem(90);

    &__header {
        display: flex;
        align-items: center;
        margin-left: pxToRem(90);
        // margin-top: 90px;

        &Img {
            width: pxToRem(150);
            aspect-ratio: 1/1;
            object-fit: cover;
            // height: 150px;
        }

        &Title {
            font-size: pxToRem(48);
            font-weight: bold;
            color: #fff;
            margin-left: 1em;
        }
    }

    &__main {
        margin-top: pxToRem(200);
    }


    &__aside {
        border-left: pxToRem(6) solid #fff;
        padding-left: .5em;
        margin-left: pxToRem(220);
        font-size: pxToRem(60);

        &Title {
            font-weight: bold;
            color: #fff;
        }

        &Subtitle {
            font-size: pxToRem(48);
            color: #fff;
        }

    }


    &__form {
        width: pxToRem(550);
        height: pxToRem(750);
        position: fixed;
        top: pxToRem(170);
        right: pxToRem(170);
        background-color: #feffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &Title {
            font-size: pxToRem(48);
            font-weight: bold;
            color: #6da6e8;
            margin-bottom: pxToRem(84);
        }

        &Item {
            font-size: pxToRem(24);
            height: pxToRem(50);
            margin-bottom: pxToRem(57);
            display: flex;
            align-items: center;
        }

        &Label {
            width: pxToRem(100);
            text-align: right;
            margin-right: pxToRem(20);
            color: #000;
        }

        &Input {
            width: pxToRem(370);
            height: pxToRem(50);
            border: pxToRem(1) solid #6da6e8;
            background-color: #fff;
            box-sizing: border-box;
            padding-left: 1em;

            &:focus {
                // outline: none;
                outline: pxToRem(1) solid #6da6e8;
            }
        }

        &Forget {
            font-size: pxToRem(20);
            color: #797979;
            align-self: flex-end;
            padding-right: 1em;

            &:hover {
                // color: #6da6e8;
                cursor: pointer;
            }
        }

        &Button {
            width: pxToRem(230);
            height: pxToRem(66);
            background-color: #6da6e8;
            color: #fff;
            font-size: pxToRem(28);
            border-radius: pxToRem(20);
            margin-top: pxToRem(84);
        }

        &Password {
            position: relative;
            // width: 100%;
        }

        &PasswordIcon {
            position: absolute;
            right: pxToRem(10);
            top: 50%;
            transform: translateY(-50%);

            &:hover {
                cursor: pointer;
            }
        }

    }

    .loginBox {
        width: pxToRem(400);
        padding: $spacing-lg;
        background-color: #fff;
        border-radius: pxToRem(8);
        box-shadow: 0 pxToRem(2) pxToRem(8) rgba(0, 0, 0, 0.1);

        h2 {
            color: $primary-color;
            margin-bottom: $spacing-md;
            font-weight: $font-weight-bold;
        }
    }
}